<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { computed, ref, onMounted } from 'vue'
import { logout, checkLoginStatus } from '../api/user'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()
const showDropdown = ref(false)
let dropdownTimeout = null

const isLoggedIn = computed(() => {
  return userStore.id !== null
})

// 检查用户登录状态
const checkLoginState = async () => {
  try {
    const response = await checkLoginStatus()
    if (response.code === 200 && response.data === false && userStore.id) {
      userStore.clearUserInfo()
    }
  } catch (error) {
    // 错误处理
  }
}

// 组件挂载时检查登录状态
onMounted(() => {
  checkLoginState()
})

const goHome = () => {
  router.push('/')
}

const goToLogin = () => {
  router.push('/login')
}

const goToChat = () => {
  router.push('/chat')
}

const goToInterestingWebpage = () => {
  router.push('/interestingWebpage')
}

const handleLogout = () => {
  ElMessageBox.confirm(
    '确认要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const response = await logout(userStore.id)
      if (response.data.code === 0) {
        // code为0表示失败
        ElMessage.error(response.data.data || '退出登录失败')
      } else {
        userStore.clearUserInfo()
        ElMessage.success('退出登录成功')
        router.push('/login')
      }
    } catch (error) {
      ElMessage.error(error.response?.data?.data || '退出登录失败')
    }
  }).catch(() => {
    // 用户点击取消，不做任何操作
  })
}

const handleMouseEnter = () => {
  if (dropdownTimeout) {
    clearTimeout(dropdownTimeout)
    dropdownTimeout = null
  }
  showDropdown.value = true
}

const handleMouseLeave = () => {
  dropdownTimeout = setTimeout(() => {
    showDropdown.value = false
  }, 200)
}
</script>

<template>
  <nav class="navbar">
    <div class="logo" @click="goHome">
      Xb AI Hub
    </div>
    <div class="right-section">
      <div class="interesting-link" @click="goToInterestingWebpage">
        有趣的网页
      </div>
      <div 
        class="login-container"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <div class="login-status" @click="!isLoggedIn && goToLogin()">
          {{ isLoggedIn ? '已登录' : '去登录' }}
        </div>
        <div 
          v-if="isLoggedIn && showDropdown" 
          class="dropdown-menu"
        >
          <div class="dropdown-item" @click="goToChat">历史对话</div>
          <div class="dropdown-item" @click="handleLogout">退出登录</div>
        </div>
      </div>
    </div>
  </nav>
</template>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: transparent;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  z-index: 1000;
  padding-top: 10px;
  max-width: 1000px;
  margin: 0 auto;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(45deg, #007cf0, #00dfd8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.logo:hover {
  opacity: 0.8;
}

.right-section {
  display: flex;
  align-items: center;
}

.interesting-link {
  font-size: 16px;
  color: #666;
  padding: 5px 15px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-right: 20px;
}

.interesting-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #4a90e2;
}

.login-container {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-status {
  font-size: 16px;
  color: #666;
  padding: 5px 15px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  cursor: pointer;
  min-width: 120px;
  text-align: center;
  transition: background-color 0.2s ease;
  position: relative;
}

.login-status:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  overflow: hidden;
  min-width: 120px;
}

.dropdown-item {
  padding: 8px 15px;
  color: #666;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: center;
}

.dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
</style> 